<template>
  <div v-if="$store.state.popuper">
    <!-- 遮罩层 -->
    <div class="black" @click="close"></div> 
    <!-- 弹出层 -->
    <div class="dialog">
      <span style="color:#c69c6c;font-size:20px;">更换头像</span>
      <span @click="close" style="float:right;font-size:20px;"><i class="el-icon-close"></i></span>
      <br/><br/>
      <slot></slot>
    </div>

  </div>
</template>

<script>
export default {
    name:"Popuper",
    methods: {
        open(){
            this.$store.commit('openPopuper')
        },
        close(){
            this.$store.commit('closePopuper')
        }
    },
}
</script>

<style scoped>
  .black{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0.5;
    top: 0;
    left: 0;
    background: #000000;
  }
  .dialog{
    position: fixed;
    width: 480px;
    z-index: 1000;
    background: #ffffff;
    border-radius: 5px;
    top: 50%;
    left: 50%;
    padding: 15px;
    margin: -240px 0 0 -240px;
    /* 0.4s完成transform移动效果*/
    transition: transform 0.2s linear 0s;
    transition: all 2s;
  }
</style>